
page
{
	// background-color: #f6f6f6;
}
.address
{
	width: 100%;
	padding: 20rpx;
	display: flex;
	align-items: center;
	.left
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 88rpx;
		height: 88rpx;
		margin-right: 10rpx;
		image{
			width: 88rpx;
			height: 88rpx;
		}
	}
	.right
	{
		color: #fff;
		.right-top{
			font-size: 28rpx;
			font-weight: 500;
			color: #FFF29A;
		}
		.right-bot{
			font-size: 20rpx;
			font-weight: 400;
		}
	}
}
.notice
{
	width: 670rpx;
	margin: 0 auto;
	padding: 0 30rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	height: 80rpx;
	box-sizing: border-box;
	background: rgba(61, 57, 67, 0.58);
	margin-bottom: 24rpx;
	.title
	{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #FFF29A;
	}
	.swiper
	{
		width: 460rpx;
		margin-left: 30rpx;
		height: 100%;
		.con
		{
			font-size: 28rpx;
			color: #fff;
			line-height: 80rpx;
			display: -webkit-box;
			 overflow: hidden;
			 text-overflow: ellipsis;
			 word-break: break-all;
			 -webkit-box-orient: vertical;
			 -webkit-line-clamp: 1;
		}
	}
}
.banner
{
	width: 100%;
	height: 440rpx;
	// margin-top: 30rpx;
	// margin-bottom: -80rpx;
	// padding: 0 40rpx;
	position: fixed;
	top: 0;
	.bannerswiper
	{
		width: 100%;
		height: 100%;
		.sliderimg
		{
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}
}
.banner-bot{
	position: absolute;
	top: 360rpx;
}
.banner-top{
	position: fixed;
	top: 0;
	z-index: 1002;
	background-color: #312C39;
	width: 750rpx;
	text-align: center;
	color: #fff;
}
.vipview
{
	margin: 0 auto;
	width: 690rpx;
	height: 190rpx;
	box-sizing: border-box;
  // TODO 线上图片
	background: url(https://pic.hlt.hnpinxun.cn/jubensha/user_bg.png);
	background-size: cover;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.vipitem
	{
		font-size: 28rpx;
		font-weight: 500;
		width: 300rpx;
		color: #fff;
		text-align: center;
		.vipitem-img{
			width: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			image
			{
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
}
.zuju{
	width: 670rpx;
	height: 250rpx;
	background: #3d3943;
	border-radius: 30rpx;
	margin: 0 auto;
	.zuju-top{
		width: 670rpx;
		height: 134rpx;
		background: #46425e;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		image{
			width: 90rpx;
			height: 90rpx;
			border-radius: 34rpx;
			margin-right: 20rpx;
		}
		.top-c{
			width: 320rpx;
			.top-peo{
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #ffffff;
			}
			.top-name{
				color: #73767d;
				font-size: 28rpx;
			}
		}
		.top-r{
			width: 160rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			background: #768ad4;
			border-radius: 34rpx;
			color: #fff;
		}
	}
	.zuju-bot{
		height: 116rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.bot-left{
			display: flex;
			align-items: center;
			image{
				width: 64rpx;
				height: 64rpx;
				border-radius: 40rpx;
				margin-right: 15rpx;
			}
		}
		.bot-right{
			color: #73767d;
			font-size: 28rpx;
		}
	}
}
.tuijian{
	padding: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.tuijian-left{
		display: flex;
		align-items: center;
		image{
			width: 40rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		text{
			color: #FFF29A;
			font-size: 32rpx;
		}
	}
	.tuijian-right{
		color: #9F9F9F;
		font-size: 24rpx;
	}
}
.recomm
{
	width: 100%;
	height: 340rpx;
	.recommswiper
	{
		width: 750rpx;
		// padding-left: 40rpx;
		height: 340rpx;
		// swiper-item{
		// 	width: 240rpx;
		// 	height: 340rpx;
		// }
		.recomm_item
		{
			width: 250rpx;
			height: 340rpx;
			border-radius: 20rpx;
			position: relative;
			margin-right: 30rpx;
			.item_img{
				width: 250rpx;
				height: 340rpx;
				image
				{
					width: 250rpx;
					height: 340rpx;
					border-radius: 20rpx;
				}
			}
			.item_bot{
				position: absolute;
				bottom: 0rpx;
				left: 0;
				width: 250rpx;
				height: 80rpx;
				background: rgba(154, 154, 154, 0.6);
				backdrop-filter: blur(8rpx);
				font-size: 24rpx;
				color: #fff;
				padding: 10rpx 16rpx;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				.bot_text{
					display: -webkit-box;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    word-break: break-all;
				    -webkit-box-orient: vertical;
				    -webkit-line-clamp: 1;
				}
			}
		}
		/* .active
		{
			transform: scale(1);
			transition: all .5s;
		} */
	}
}
	.list
	{
		margin-top:44rpx;
		width: 750rpx;
		height: 230rpx;
		margin-bottom: 40rpx;
		.list_swiper{
			width: 750rpx;
			height: 230rpx;
			.item
			{
				width: 570rpx;
				padding: 24rpx;
				background: linear-gradient(279.39deg, #FF6F91 0%, #FFC48E 107.04%);
				border: 1rpx solid rgba(255,255,255,0.5);
				display: flex;
				border-radius: 20rpx;
				position: relative;
				color: #fff;
				&.active{
					background: linear-gradient(278.84deg, #6AB8FF -4.66%, #97F1DB 107.22%);
				}
				image
				{
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.item_right{
					.item_name
					{
						font-size: 32rpx;
						font-weight: 500;
						margin-top: 10rpx;
					}
					.item_count
					{
						font-size: 24rpx;
						color: #fff;
						margin-top: 16rpx;
						margin-bottom: 34rpx;
					}
				}
				.item_hot{
					width: 120rpx;
					height: 50rpx;
					position: absolute;
					right: 20rpx;
					top: 20rpx;	
					padding-left: 60rpx;
					line-height: 59rpx;
					color: #DD61BA;
					font-size: 20rpx;
          // TODO 线上图片
					background: url(https://pic.hlt.hnpinxun.cn/jubensha/sex_2.png);
					background-size: cover;
					&.active{
						color: #5D91DE;
            // TODO 线上图片
						background: url(https://pic.hlt.hnpinxun.cn/jubensha/sex_1.png);					
						background-size: cover;
					}
				}
			}
		}
	}
	.index-top{
		width: 670rpx;
		height: 220rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom:24rpx;
		.index-left{
			width: 402rpx;
			height: 220rpx;
			padding: 20rpx 0 0 30rpx;
			background: rgba(61,57,67,0.58);
			border-radius: 20rpx;
			backdrop-filter: blur(8rpx);
			.index-logo{
				width: 100rpx;
				height: 56rpx;
				margin-bottom: 24rpx;
				image{
					width: 100rpx;
					height: 56rpx;
				}
			}
			.index-title{
				font-size: 32rpx;
				color: #fff29a;
				font-weight: 500;
				margin-bottom: 24rpx;
			}
			.index-address{
				display: flex;
				align-items: center;
				.index-icon{
					width: 20rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
				.address-name{
					width: 300rpx;
					height: 30rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
					overflow: hidden;
				}
			}
		}
		.index-right{
			width: 240rpx;
			height: 220rpx;
			background: rgba(61,57,67,0.58);
			border-radius: 20rpx;
			backdrop-filter: blur(8rpx);
			position: relative;
			// padding-top: 40rpx;
			.index-day{
				width: 108rpx;
				height: 32rpx;
				margin: 0 auto;
				background: #514F56;
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				line-height: 32rpx;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
			.index-we{
				width: 80rpx;
				height: 80rpx;
				margin-top: 10rpx;
				margin-bottom: 14rpx;
				margin-left: 80rpx;
			}
			.index-w-name{
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}
			
			.switchbg
			{
				width: 108rpx;
				height: 32rpx;
				margin: 0 auto;
				background: #514F56;
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				line-height: 32rpx;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
				position: absolute;
				 bottom: 0;
				 left: 66rpx;
			}
		}
	}
	.coupon{
		width: 670rpx;
		height: 160rpx;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		background: rgba(61,57,67,0.58);
		border-radius: 20rpx;
		backdrop-filter: blur(8rpx);
		margin: 0 auto;
		margin-bottom: 30rpx;
		.coupon-left{
			width: 300rpx;
			.left-title{
				font-size: 32rpx;	
				font-weight: 500;
				color: #fff29a;
				margin-bottom: 40rpx;
			}
			.left-text{
				font-size: 24rpx;
				color: #ffffff;
			}
		}
		.coupon-img{
			width: 120rpx;
			height: 120rpx;
			image{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	
	
	.popview
	{
		padding: 50rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		position: relative;
		background-color: #FFFFFF;
		width: 500rpx;
		height: 300rpx;
		.popbtn
		{
			background-color: #FFF29A;
			color: #000;
			width: 500rpx;
			height: 70rpx;
			border-radius: 35rpx;
			line-height: 70rpx;
			text-align: center;
			margin: 20rpx 0;
		}
		.popclose
		{
			position:absolute;
			top: 30rpx;
			right: 30rpx;
		}
	}

	.light{
		background: $clolr-fff !important;
		height: auto;
		min-height: 100%;
	}
	.light-index-l{
		background: rgba(255,255,255,0.80) !important;
		color: $clolr-333;
	}
	.light-index-notice{
		background: rgb(255,255,255) !important;
		color: $clolr-333;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.10) !important; 
		z-index: 1001;
		position: relative;
	}
	.light-index-con{
		color: $clolr-333 !important;
	}
	.light-index-coupon{
		background: rgb(255,255,255) !important;
		color: $clolr-333;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.10) !important; 
		.left-text{
			color: #333 !important;
		}
	}
	.light-tuijian-left{
		text{
			color: #333 !important;
		}
	}
	.light-banner{
		z-index: 100;
	}
	.light-index-top{
		z-index: 1001;
		position: relative;
	}
	.light-banner-bot{
		background: #fff !important;
	}
	.light-banner-top{
		background: #fff !important;
		color: #333 !important;
	}
	.light-index-title{
		color: #333 !important;
	}
	.light-vipview{
    // TODO 线上图片
		background: url(https://pic.hlt.hnpinxun.cn/jubensha/user_bgl1.png) !important;
		background-size: cover !important;
		// box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.10) !important; 
		// background: url(https://pic.hlt.hnpinxun.cn/jubensha/bgl_index.png) !important;
	}
	.light-index-user{
		color: #FFA978 !important;
	}
	.light-index-yue{
		color: #909DFF !important;

	}